<template>
    <!-- 张权 2023年4月3日 09点49分 -->
    <!-- 导航栏 -->
    <div id="NavigationBar">
        <div id="div2">
            <el-row>
                <!-- logo -->
                <el-col :span="3">
                    <img id="img1" src="../../assets/ffLogo.png">
                </el-col>
                <!-- 标题 -->
                <el-col :span="4" style="overflow: hidden;">
                    <p id="p1">OVO</p>
                </el-col>
                <!-- 内容 -->
                <el-col :span="10">
                    <ul id="ul1">
                        <li
                            v-for="(item, index) in liData"
                            :key="index">
                            <router-link class="rlink1" :to="{ path: item.router }" >{{item.txt}}</router-link>
                        </li>
                    </ul>
                </el-col>
                <!-- 用户登录注册 -->
                <el-col :span="5">
                    <div v-if="disPlay">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <img :src="`${avatarUrl}`" id="img3" @click="getMyHomePage">
                                <!-- <img :src="`${$imageUrl}?id=`+ avatarUrl"  id="img3" @click="getMyHomePage"> -->
                                
                            </span> 
                            <span>
                                <p id="nickName">{{loginName}}</p>
                            </span>
                            <el-dropdown-menu slot="dropdown" style="margin-right:120px">
                                <!-- <el-dropdown-item><p @click="getPersonal">个主页</p></el-dropdown-item> -->
                                <el-dropdown-item ><p @click="quit">退出登录</p></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else>
                        <p id="p2" @click="login">登录</p>
                    </div>
                </el-col>
                <!-- 购物车 -->
                <!-- <el-col :span="2">
                    <div id="img2" @click="getShoppingCart">11</div>
                </el-col> -->
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 导航栏信息
      liData: [
        {
          txt: '首页',
          router: '/HomePage'
        },
        {
          txt: '课程分类',  
          router: '/CoursecCass'
        },
        {
          txt: '明星教师',
          router: '/starTeacher'
        },
        {
          txt: '个人主页',
          router: '/MyHomePage'
        }
      ],
      // 切换登录前后的状态
      disPlay: sessionStorage.getItem("token"),
      avatarUrl: 'http://101.43.223.224:8765/image/getImageById?id='+window.sessionStorage.getItem('avatarUrl'),
    //   // 用户id
    //   userId:'',
    //   // 存放token
    //   token: '',
    //   // 存放用户头像
    //   // 存放用户姓名
    //   nickName:'',
    //   // 选中样式
    //   routerClass: 'routerClass',
    //   // 主题
      tableDate: {},
      loginName: '',
      dynamicState: {},
      user: {}
    }
  },
  watch : {
    disPlay(oldData, newData){
        console.log(oldData)
        console.log(newData)
    }
  },
  mounted () {
      // 从头部拿用户id
    //   this.userId = sessionStorage.getItem("userId") 
    //   // 从头部拿token
    //   this.token = sessionStorage.getItem('token')
    //   // 获取主题
    //   this.dynamicStateByState()
    //   // 根据用户id获取用户信息
    //   this.getUserListByUserId()

    // 刷新token
    this.updateToken()
    // 根据id获取用户信息
    this.selectUserbyId()
    // 监听 根据id获取用户信息方法
    this.$eventBus.$on('update-nickname-done', () => {
        this.selectUserbyId()
    })
  },
  methods: {
    // 根据id获取用户信息
    selectUserbyId() {
        if (window.sessionStorage.getItem('userId') !== null) {
            this.$axios.get('/user/selectUserbyId?id=' + window.sessionStorage.getItem('userId')).then(res => {
            if(res.data.flag){
                this.loginName = res.data.data.loginName
                window.sessionStorage.setItem('user',JSON.stringify(res.data.data))
                this.user = JSON.parse(window.sessionStorage.getItem('user'))
                console.log('loginName::'+this.user.loginName)
                this.message('success', '登录成功')
            }else{
                this.message('error', '获取用户信息失败,请重新登录')
            }
        }).catch(err => {
            console.log(err)
        })
        } else {
            console.log(666)
        }
    },
    // 获取主题信息 没用
    dynamicStateByState () {
        this.$axios.get('/dynamicState/dynamicStateByState').then(res => {
            if (res.data.flag) {
                this.dynamicState = res.data.data
            }else{
                this.myMessage('error', res.data.data)
            }
        }).catch(err => {
            console.log(err)
        })
    },
    // 去登录页面
    login(){
        this.$router.push('/Login')
    },
    // 去个人主页
    getMyHomePage () {
        this.$router.push('/MyHomePage')
    },
    // 点击退出功能
    quit(){
        this.message('success', '退出登录成功')
        window.sessionStorage.clear();
        this.$router.go(0)
        this.updateToken()
    },
    // 刷新token 获取token令牌
    updateToken() { 
        var token = sessionStorage.getItem('token')
        if (token == null) {
            this.disPlay = false
        } else {
            this.disPlay = true
        }
    },


    

    // ////////////////////////////////张权代码
    // 根据用户id获取用户信息
    // getUserListByUserId(){
    //     this.$axios.get('/userLogin/getUserListByUserId?id=' + this.userId).then(res => {
    //         if(res.data.flag){
    //             this.avatarUrl = res.data.data.avatarUrl
    //             this.nickName = res.data.data.nickName
    //         }
    //     })
    // },
    // 
    // getShoppingCart () {
    //     if (this.token !== null) {
    //         this.$router.push('/shoppingCart')
    //     } else {
    //         this.message('请先登录','error')
    //     }
    // },
    //消息提示框
    // message(message,type){
    //     this.$message({
    //         message:message,
    //         type: type
    //     });
    // },
  }
}
</script>

<style scoped>
    .el-dropdown{
        width: 100%;
        height: 100%;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    #button1{
        width: 76px;
        height: 32px;
        margin-top: 14px;
        font-size: 16px;
        color: #fff;
        background-color: #222;
        border-radius: 8px;
        float: right;
        cursor:pointer;
        margin-left: 32px;
        border: none;
    }
    #button1:hover{
        background-color: #4e4e4e;
    }
    #div2{
        flex: 100%;
        height: 60px;
        /* background-image: '../assets/top.png'; */
        background: rgb(31,126,247);
    }
    #img3{
        width: 40px;
        height: 40px;
        display: block;
        border-radius: 50%;
        float: left;
        margin-left: 180px;
        margin-top: 10px;
    }
    #nickName{
        width: 110px;
        height: 40px;
        display: block;
        float: left;
        line-height: 2;
        margin-left: 14px;
        margin-top: 14px;
        font-size: 16px;
        color: #fff;
    }
    #img2{
        width: 30px;
        height: 30px;
        margin: auto;
        margin-top: 15px;
        /* background-image: url('../../assets/image/shopping.png'); */
        background-position: none;
        background-size: 100%;
        cursor:pointer;
    }
    #img2:hover{
        /* background-image: url('../../assets/image/shopping1.png'); */
        background-position: none;
        background-size: 100%;
        cursor:pointer;
    }
    #img1{
        width: 100px;
        height: 50px;
        margin: 0 auto;
        margin: 3px 44px;
        margin-left: 200px;
    }
    #p1{
        float: left;
        line-height: 60px;
        margin: 0;
    }
    #p2:hover{
        cursor:pointer;
        color: #4e4e4e;
    }
    #p2{
        text-align: right;
        line-height: 60px;
        margin: 0;
        cursor:pointer;
        float: right;
    }
    #p3{
        text-align: center;
        line-height: 60px;
        margin: 0;
        cursor:pointer;
    }
    #ul1{
        width: 500px;
        height:60px;
        margin: 0 20px;
        list-style-type: none;
        margin: auto;
        padding: 0;
    }
    #ul1 li{
        width: 20%;
        height: 100%;
        line-height: 60px;
        text-align: center;
        float: left;
        font-size: 18px;
        cursor:pointer;
    }
    .rlink1:hover{
        cursor:pointer;
        color: #4e4e4e;
    }
    .rlink1 {
        text-decoration: none;
        color: black;
    }
</style>
